<template>
  <div class="app-container">
    <el-form
      :model="queryParams"
      ref="queryForm"
      :inline="true"
      v-show="showSearch"
      label-width="80px"
      class="formList"
    >
      <el-row>
        <!-- <el-col :span="5"> -->
          <el-form-item label="承诺标题" prop="headline">
            <el-input
              v-model="queryParams.headline"
              placeholder="请输入承诺标题"
              clearable
              size="small"
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
        <!-- </el-col>
        <el-col :span="5"> -->
          <el-form-item label="数据状态" prop="dataStatus">
            <el-select
              v-model="queryParams.dataStatus"
              placeholder="请选择数据状态"
              clearable
              size="small"
            >
              <el-option
                v-for="dict in dataStatusOptions"
                :key="dict.dictValue"
                :label="dict.dictLabel"
                :value="dict.dictValue"
              />
            </el-select>
          </el-form-item>
        <!-- </el-col>
        <el-col :span="5"> -->
          <el-form-item label="供应商" prop="supplierUid">
            <el-select
              v-model="queryParams.supplierUid"
              placeholder="请选择供应商"
            >
              <el-option
                v-for="dict in supplierUidOptions"
                :key="dict.supplierUid"
                :label="dict.supplierName"
                :value="dict.supplierUid"
              />
            </el-select>
          </el-form-item>
        <!-- </el-col> -->

        <el-col :span="8">
<!--          <el-form-item label="创建时间" prop="createTime">-->
<!--            <el-date-picker-->
<!--              v-model="queryParams.createTimeArray"-->
<!--              type="daterange"-->
<!--              align="right"-->
<!--              value-format="yyyy-MM-dd"-->
<!--              unlink-panels-->
<!--              range-separator="至"-->
<!--              start-placeholder="开始日期"-->
<!--              end-placeholder="结束日期"-->
<!--              :picker-options="pickerOptions">-->
<!--            </el-date-picker>-->
<!--          </el-form-item>-->
        </el-col>
      </el-row>
      <el-row>
        <el-form-item style="margin-left: 20px;">
            <el-button
              type="primary"
              icon="el-icon-search"
              size="mini"
              @click="handleQuery"
            >搜索
            </el-button
            >
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
            >重置
            </el-button
            >
          </el-form-item>
      </el-row>

    </el-form>
    <el-row class="row-mbinfo" style="margin-left: 0px; margin-right: 0px;">
      <el-row>
        <el-col :span="1.5">
          <el-button
            type="primary"
            plain
            icon="el-icon-plus"
            size="mini"
            @click="handleAdd"
            v-hasPermi="['supplier:commitment:add']"
          >新增
          </el-button>
        </el-col>
        <el-col :span="1.5">
<!--          <el-button-->
<!--            type="success"-->
<!--            plain-->
<!--            icon="el-icon-edit"-->
<!--            size="mini"-->
<!--            :disabled="single"-->
<!--            @click="handleUpdate"-->
<!--            v-hasPermi="['supplier:commitment:edit']"-->
<!--          >修改-->
<!--          </el-button>-->
        </el-col>
        <el-col :span="1.5" style="margin-left: 10px">
          <el-button
            type="danger"
            plain
            icon="el-icon-delete"
            size="mini"
            :disabled="multiple"
            @click="handleDelete"
            v-hasPermi="['supplier:commitment:remove']"
          >删除
          </el-button>
        </el-col>
        <el-col :span="1.5">
<!--          <el-button-->
<!--            type="warning"-->
<!--            plain-->
<!--            icon="el-icon-download"-->
<!--            size="mini"-->
<!--            @click="handleExport"-->
<!--            v-hasPermi="['supplier:commitment:export']"-->
<!--          >导出-->
<!--          </el-button>-->
        </el-col>
        <right-toolbar
          :showSearch.sync="showSearch"
          @queryTable="getList"
        ></right-toolbar>
      </el-row>
    </el-row>
    <div class="divTable">
      <el-table
        border
        v-loading="loading"
        :data="commitmentList"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" align="center"/>

        <el-table-column
          label="图标"
          align="center"
          :show-overflow-tooltip="true"
          prop="icon"
        >
          <template slot-scope="scope">
            <el-popover placement="right" title="" trigger="click">
              <el-image
                slot="reference"
                :src="scope.row.icon"
                :alt="scope.row.icon"
                style="max-height: 50px; max-width: 50px"
              ></el-image>
              <el-image :src="scope.row.icon"></el-image>
            </el-popover>
          </template>

          <template slot-scope="scope">
            <el-image v-if="scope.row.icon != null && scope.row.icon != '' " slot="reference"
                      :src="scope.row.icon"
                      class="image-rows" :preview-src-list="[scope.row.icon]"></el-image>
          </template>
        </el-table-column>

<!--        <el-table-column-->
<!--          label="供应商名称"-->
<!--          align="center"-->
<!--          prop="supplierUid"-->
<!--          :show-overflow-tooltip="true"-->
<!--        >-->
<!-- -->


<!--        </el-table-column>-->
        <el-table-column
          label="供应商名称"
          align="center"
          prop="supplierName"
          min-width="100"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          label="承诺标题"
          align="center"
          prop="headline"
          min-width="120"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          label="承诺内容"
          align="center"
          prop="content"
          min-width="120"
          :show-overflow-tooltip="true"
        />
        <el-table-column label="状态" align="center" prop="dataStatus">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.dataStatus"
              active-value="1"
              inactive-value="0"
              @change="handleStatusChange(scope.row)"
            ></el-switch>
          </template>
        </el-table-column>

        <el-table-column label="创建时间" align="center" width="180" prop="createTime"/>
        <el-table-column label="排序" align="center" prop="dataSort"/>
        <el-table-column
          label="操作"
          align="center"
          min-width="140"
          fixed="right"
          class-name="small-padding fixed-width"
        >
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              icon="el-icon-zoom-in"
              @click="handleShowDetail(scope.row)"
              v-hasPermi="['supplier:commitment:query']"
            >查看
            </el-button>
            <el-button
              size="mini"
              type="text"
              icon="el-icon-edit"
              @click="handleUpdate(scope.row)"
              v-hasPermi="['supplier:commitment:edit']"
            >修改
            </el-button>
            <el-button
              size="mini"
              type="text"
              icon="el-icon-delete"
              v-if="scope.row.dataStatus == '0'"
              @click="handleDelete(scope.row)"
              v-hasPermi="['supplier:commitment:remove']"
            >删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
    </div>

    <!-- 添加或修改服务承诺对话框 -->
    <el-dialog
      :title="title"
      :visible.sync="open"
      width="500px"
      append-to-body
      @keyup.enter.native="submitForm"
    >
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">

        <el-form-item label="供应商" prop="supplierUid">
          <el-col :span="12">
          <el-select clearable v-model="form.supplierUid" placeholder="请选择供应商">
            <el-option
              v-for="dict in supplierUidOptions"
              :key="dict.supplierUid"
              :label="dict.supplierName"
              :value="dict.supplierUid"
            />
          </el-select>
          </el-col>
        </el-form-item>
        <el-form-item label="承诺标题" prop="headline">
          <el-col :span="12">
          <el-input v-model="form.headline" placeholder="请输入承诺标题"/>
          </el-col>
        </el-form-item>
        <el-form-item label="承诺内容" prop="content">
          <el-input
            v-model="form.content"
            type="textarea"
            placeholder="请输入内容"
            maxlength="200"
            show-word-limit
          />
        </el-form-item>
        <el-form-item label="图标">
          <imageUpload v-model="form.icon"/>
        </el-form-item>

        <el-form-item label="排序" prop="dataSort">
          <el-input-number
            v-model="form.dataSort"
            placeholder="请输入排序"
            controls-position="right"
            :min="0"
          />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 查看服务承诺对话框 -->
    <el-dialog
      :title="viewTitle"
      :visible.sync="viewOpen"
      width="700px"
      append-to-body
    >
      <el-form ref="detailForm">
        <div>
          <!-- <i class="MmsUiBlockTitle___line___27lhp1-44-1"></i> -->
          <div class="big_title_style" style="font-size: 18px">
            <span>承诺信息</span>
          </div>
        </div>
        <el-divider></el-divider>
        <div style="margin-left: 50px">
          <el-row>
            <el-col :span="12">
              <el-form-item>
                <el-form-item label="承诺标题">
                  <span>{{ showData.headline }}</span>
                </el-form-item>
              </el-form-item>
            </el-col>

          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="图标">
                <el-image
                  :src="showData.icon"
                  style="width: 100px; height: 100px"
                  :z-index="zIndex"
                  :preview-src-list="[showData.icon]"
                ></el-image>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="16">
              <el-form-item>
                <el-form-item label="承诺内容">
                  <span>{{ showData.content }}</span>
                </el-form-item>
              </el-form-item>
            </el-col>

          </el-row>
        </div>

        <div>
          <!-- <i class="MmsUiBlockTitle___line___27lhp1-44-1"></i> -->
          <div class="big_title_style" style="font-size: 18px">
            <span>其他信息</span>
          </div>
        </div>
        <el-divider></el-divider>
        <div style="margin-left: 50px">
          <el-row>
            <el-col :span="12">
              <el-form-item label="更新时间">
                <span>{{ showData.updateTime }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="更新人账号">
                <span>{{ showData.updateName }}</span>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="12">
              <el-form-item label="创建时间">
                <span>{{ showData.createTime }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="创建人账号">
                <span>{{ showData.createName }}</span>
              </el-form-item>
            </el-col>
          </el-row>

        </div>


      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" size="mini" @click="handCloseDetail"
        >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import {
    listCommitment,
    getCommitment,
    delCommitment,
    addCommitment,
    updateCommitment,
    updateDataStatus
  } from '@/api/supplier/commitment'

  import {getSupplierList} from '@/api/supplier/info'
  import ImageUpload from '@/components/ImageUpload'

  export default {
    name: 'Commitment',
    components: {
      ImageUpload
    },
    data() {
      return {
        pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit('pick', [start, end])
            }
          }]
        },
        supplierUidOptions:[],
        //图片预览
        zIndex: 3000,
        // 遮罩层
        loading: true,
        // 选中数组
        ids: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 显示搜索条件
        showSearch: true,
        // 总条数
        total: 0,
        // 服务承诺表格数据
        commitmentList: [],
        // 供应商列表
        supplierNameOptions: [],
        // 弹出层标题
        title: '',
        //查看详细标题
        viewTitle: '',
        //选中数组的名字
        names: [],
        // 是否显示弹出层
        open: false,
        //是否显示查看详细弹出层
        viewOpen: false,
        //查看详细数据
        showData: [],
        // 数据状态字典
        dataStatusOptions: [],
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          headline: null,
          content: null,
          dataStatus: null,
          createTime: null,
          createTimeArray: null
        },
        columns: [
          {
            label: '修改时间',
            dataIndex: 'commitmentUid'
          },
          {
            label: '平台ID',
            dataIndex: 'platformUid'
          },
          {
            label: '供应商ID',
            dataIndex: 'supplierUid'
          },
          {
            label: '承诺标题',
            dataIndex: 'headline'
          },
          {
            label: '承诺内容',
            dataIndex: 'content'
          },
          {
            label: '图标',
            dataIndex: 'icon'
          },
          {
            label: '数据状态',
            dataIndex: 'dataStatus'
          },
          {
            label: '创建人',
            dataIndex: 'createUser'
          },
          {
            label: '创建时间',
            dataIndex: 'createTime'
          },
          {
            label: '修改人',
            dataIndex: 'updateUser'
          },
          {
            label: '修改时间',
            dataIndex: 'updateTime'
          }
        ],
        // 表单参数
        form: {},
        // 表单校验
        rules: {
          supplierUid: [
            {required: true, message: '请选择供应商', trigger: 'blur'}
          ],
          content: [
            {required: true, message: '承诺内容不能为空', trigger: 'blur'},
          ],
          icon: [{required: true, message: '图标不能为空', trigger: 'blur'}],
          headline: [
            {required: true, message: '标题不能为空', trigger: 'blur'},
            { min: 1, max: 15, message: '标题1 到 30个字符之间', trigger: 'blur' }
          ],
          dataSort: [
            {required: true, message: '排序不能为空', trigger: 'blur'}
          ]
        }
      }
    },
    created() {
      this.getList()
      this.getDicts('sys_data_status').then((response) => {
        this.dataStatusOptions = response.data
      })
      getSupplierList(1).then((response) => {
        this.supplierUidOptions = response.data
      })
      getSupplierList(1).then((response) => {
        this.supplierNameOptions = response.data
      })
    },
    methods: {
      /** 查询服务承诺列表 */
      getList() {
        this.loading = true
        listCommitment(this.queryParams).then((response) => {
          this.commitmentList = response.rows
          this.total = response.total
          this.loading = false
        })
      },
      // 数据状态字典翻译
      dataStatusFormat(row, column) {
        return this.selectDictLabel(this.dataStatusOptions, row.dataStatus)
      },
      // 取消按钮
      cancel() {
        this.open = false
        this.reset()
      },
      // 表单重置
      reset() {
        this.form = {
          commitmentUid: null,
          platformUid: null,
          supplierUid: null,
          headline: null,
          content: null,
          icon: null,
          dataStatus: '0',
          createUser: null,
          createTime: null,
          updateUser: null,
          updateTime: null,
          dataSort: 10
        }
        this.resetForm('form')
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1
        this.getList()
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.resetForm('queryForm')
        this.handleQuery()
      },
      // 多选框选中数据
      handleSelectionChange(selection) {
        this.ids = selection.map((item) => item.commitmentUid)
        this.names = selection.map((item) => item.headline)
        this.single = selection.length !== 1
        this.multiple = !selection.length
        //用于禁用删除
        if (this.multiple == false) {
          for (var i = 0; i < selection.length; i++) {
            var element = selection[i]
            if ('1' === element.dataStatus) {
              this.multiple = true
              break
            }
          }
        }
      },
      /** 新增按钮操作 */
      handleAdd() {
        this.reset()
        this.open = true
        this.title = '添加服务承诺'
      },
      /** 查看详情按钮操作 **/
      handleShowDetail(row) {
        this.viewOpen = true
        this.viewTitle = '查看服务承诺'
        this.showData = row

      },
      handCloseDetail() {
        this.viewOpen = false
        this.showData = []
      },
      /** 修改按钮操作 */
      handleUpdate(row) {
        this.reset()
        const commitmentUid = row.commitmentUid || this.ids
        getCommitment(commitmentUid).then((response) => {
          this.form = response.data
          this.open = true
          this.title = '修改服务承诺'
        })
      },
      /** 提交按钮 */
      submitForm() {
        this.$refs['form'].validate((valid) => {
          if (valid) {
            if (this.form.commitmentUid != null) {
              updateCommitment(this.form).then((response) => {
                this.msgSuccess('修改成功')
                this.open = false
                this.getList()
              })
            } else {
              addCommitment(this.form).then((response) => {
                this.msgSuccess('新增成功')
                this.open = false
                this.getList()
              })
            }
          }
        })
      },
      /** 删除按钮操作 */
      handleDelete(row) {
        const commitmentUids = row.commitmentUid || this.ids
        const name = row.headline || this.names
        this.$confirm('是否确认删除承诺为"' + name + '"的数据项?', '警告', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(function () {
            return delCommitment(commitmentUids)
          })
          .then(() => {
            this.getList()
            this.msgSuccess('删除成功')
          })
      },
      /** 导出按钮操作 */
      handleExport() {
        this.download(
          'supplier/commitment/export',
          {
            ...this.queryParams
          },
          `supplier_commitment.xlsx`
        )
      },
      // 状态修改
      handleStatusChange(row) {
        let text = row.dataStatus === '0' ? '无效' : '有效'
        this.$confirm(
          '确定要把"' + row.headline + '"承诺,设为' + text + '吗？',
          '警告',
          {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }
        )
          .then(function () {
            return updateDataStatus(row.commitmentUid, row.dataStatus,row.supplierUid)
          })
          .then(() => {
            this.msgSuccess('操作成功')
            this.getList()
          })
          .catch(function () {
            row.dataStatus = row.dataStatus === '0' ? '1' : '0'
          })
      }
    }
  }
</script>
<style scoped>
  .MmsUiBlockTitle___line___27lhp1-44-1 {
    display: inline-block;
    background: #407cff;
    width: 2px;
    height: 16px;
    margin-right: 8px;
  }

  .MmsUiBlockTitle___title___2C-H-1-44-1 {
    display: inline-block;
    font-size: 20px;
    color: #333;
    position: relative;
  }
</style>
